﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<link rel="stylesheet" type="text/css" href="__PLUG__/webuploader-0.1.5/webuploader.css">

<style>
    layui-progress-big, .layui-progress-big .layui-progress-bar {
        height: 30px;
        line-height: 30px
    }

    .layui-progress {
        position: relative;
        height: 30px;
        border-radius: 20px;
        background-color: #eee;
    }

    .layui-progress-text {
        position: relative;
        top: -20px;
        line-height: 30px;
        font-size: 12px;
        color: #666;
    }

    .webuploader-pick {
        width: 120px;
        background: #1ab394;
        padding: 9px 0;
        font-size: 13px;
    }

    .webuploader-pick-hover {
        background: #19A689;
    }

</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">姓名</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="请输入姓名">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">密码</label>
                                <div class="col-sm-3">
                                    <input type="password" placeholder="请输入密码" class="form-control" name="password">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-lg-1 col-form-label">禁用输入框</label>
                                <div class="col-lg-3">
                                    <input type="text" disabled placeholder="禁用输入..." class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">爱好：</label>
                                <div class="col-lg-3">
                                    <input type="checkbox" name="like[1]" title="写作">
                                    <input type="checkbox" name="like[2]" title="阅读">
                                    <input type="checkbox" name="like[3]" title="发呆">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">性别：</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="sex" value="男" title="男">
                                    <input type="radio" name="sex" value="女" title="女" checked>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">单图上传</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">多图上传</label>
                                <div class="col-sm-6">
                                    <input type="file" id="imgs_file" multiple style="display: none">
                                    <input type="hidden" class="hidden_value" name="imgs" id="imgs" value="{$info['imgs']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('imgs_file', 'imgs', 'form-uploaded-box', false, 5)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box', 5)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box">
                                        {volist name="info.imgs_arr" id="vo"}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{$vo.path}" data-id="{$vo.id}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">兴趣</label>
                                <div class="col-sm-3">
                                    <select name="city">
                                        <option value="0">北京</option>
                                        <option value="1">上海</option>
                                        <option value="2">广州</option>
                                        <option value="3">深圳</option>
                                        <option value="4">杭州</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">文本框</label>
                                <div class="col-sm-3">
                                    <textarea class="form-control" name="textarea" rows="8"></textarea>
                                    <span class="form-text m-b-none">这是说明文字这是说明文字这是说明文字这是说明文字</span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item box-item-video">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">视频</label>
                                <div class="col-sm-3">
                                    <div class="layui-progress layui-progress-big" lay-filter="number" lay-showPercent="true">
                                        <div class="layui-progress-bar" lay-percent="0%"></div>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <input type="file" id="file" accept="video/*" style="display: none">
                                    <input type="hidden" name="video_id" id="video" value="{$info['video_id']|default=''}"/>
                                    <div id="upload_video">
                                        上传视频
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="video_box" style="display: none">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-3">
                                    <video src="" controls></video>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">KindEditor</label>
                                <div class="col-lg-6">
                                    <div class="ibox">
                                        <textarea id="editor_id"></textarea>
                                        <textarea name="content" data-editor="kindEditor" style="display: none"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}

{include file="public/preview-img-mask" swiper-id="cropper-preview" /}

{/block}

{block name='js'}
<script src="__STATIC__/layui/layui.js"></script>
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>
<script src="__PLUG__/webuploader-0.1.5/webuploader.js"></script>
<script>
    $(function () {
        // 实例化编辑器
        initKindEditor('editor_id');

        /************   WebUploader upload video start   ************/
        var uploader = WebUploader.create({
            // swf文件路径
            swf: 'webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:url('/upload/UploadFile/webUploaderUploadFile')}",
            // 选择文件的按钮
            pick: "#upload_video",
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: true,
            // 图片name
            fileVal: 'file',
            // 单文件
            multiple: false,
            //是否要分片处理大文件上传
            chunked: true,
            //分片上传，每片2M，默认是5M
            chunkSize: 5 * 1024 * 1024,
            // 单个文件大小限制 10 G
            fileSingleSizeLimit: 10 * 1024 * 1024 * 1024,
        });

        var uploader_loading;
        uploader.on('uploadProgress', function (file, percentage) {
            var percent = parseFloat(percentage * 100).toFixed(2);
            layui.element.progress('number', percent + '%');
            if (percent == 100) {
                uploader_loading = layer.load(2, {
                    shade: [0.8, '#393D49'],
                    content: '<span style="margin-left: -145px;color: red;">正在完成上传视频最后步骤，请勿刷新页面！！！</div>',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '50px',
                            'width': '300px',
                            'font-size': '16px',
                            'font-weight': '600'
                        });
                    }
                })
            }
        });

        uploader.on('uploadSuccess', function (file, res) {
            layer.close(uploader_loading);
            var id = res.data.id;
            var path = res.data.path;

            let fileUrl = URL.createObjectURL(file.source.source);
            let audioElement = new Audio(fileUrl);

            new Promise(resolve => {
                audioElement.addEventListenerzhe("loadedmetadata", (_event) => {
                    duration = parseInt(audioElement.duration);
                    resolve(duration);
                });
            }).then(duration => {
                $('.duration').val(duration);
            })

            $('#video').val(id);
            $('#video_box').show().find('video').attr('src', path);


        });
        /************   WebUploader upload video end   ************/
    })
</script>{/block}
